<template>
  <div class="consulants-page">
    <GhNavBar title="咨询师-管理" />
      <!-- 头部搜索和添加咨询师 -->
      <div class="head">
        <van-search class="search"  v-model="value" placeholder="搜索标题"   />
        <van-button class="add-btn" @click="addConsultant" native-type="submit"  block  >
               添加咨询师
         </van-button>
    </div>
    <div class="consultant-list">
        <van-list v-if="items.length > 0">
            <div class="total_consultants">共有{{items.length}}条符合条件记录</div>
            <van-cell v-for="item1 in items" :key="item1.id" class="item1-item">
                <div class="name">{{ item1.name }}</div>
               <div class="account">联系方式：{{item1.account}}</div>
               <div class="operate">
                <van-button @click="editConsultant(item1)">编辑</van-button>
                <van-button @click="del_Consultant(item1.id)">删除</van-button>
                <van-button >推荐</van-button>
                <van-button>预约名单</van-button>
               </div>
            </van-cell>
          </van-list>
          <van-empty v-else description="暂无咨询师信息" />
    </div>
    <van-popup class="updatepage" v-model:show="show" position="bottom" closeable   >
        <h3>编辑咨询师信息</h3>
        <van-field  v-model="updateConsultantInfo.avatar"   label="图片链接" required label-width="60px" autocomplete="off" ></van-field>
        <van-field  v-model="updateConsultantInfo.name"   label="姓名" required label-width="60px" autocomplete="off" ></van-field>
        <van-field v-model="updateConsultantInfo.coun_label"  name="radio"   label="等级" required label-width="80px" autocomplete="off" >
             <template #input> 
                <van-radio-group v-model="updateConsultantInfo.coun_label"  direction="horizontal">
                    <van-radio name="1">1星</van-radio>
                    <van-radio name="2">2星</van-radio>
                    <van-radio name="3">3星</van-radio>
                  </van-radio-group>
             </template>
        </van-field>
        <van-field
            v-model="updateConsultantInfo.introduction"
            rows="5"
            required
            class="custom-field"
            label="详情"
            label-width="40px"
            autosize
            maxlength="250"
            type="textarea"
            show-word-limit
            placeholder="咨询师简介"
          />
        <van-field  v-model="updateConsultantInfo.experience"   label="工作经验" required label-width="70px" autocomplete="off" type="digit" placeholder="请输入整数" ></van-field>
        <van-field  v-model="updateConsultantInfo.account"   label="联系方式" required label-width="70px" autocomplete="off" placeholder="请输入标准手机号码"></van-field>
        <van-field  v-model="updateConsultantInfo.gender" name="radio"    label="性别" required label-width="80px" autocomplete="off" >
            <template #input> 
               <van-radio-group v-model="updateConsultantInfo.gender" direction="horizontal">
                   <van-radio name="男">男</van-radio>
                   <van-radio name="女">女</van-radio>
                 </van-radio-group>
            </template>
       </van-field>
        <van-button native-type="submit" @click="submit_updateConsultant" block round type="primary">
           确定修改
         </van-button>
     </van-popup>
  </div>
</template>

<script setup>
import {ref,reactive,onMounted} from "vue"
import {getConsultants,delConsultant,updateConsultant} from '@/services/admin'
import {useRouter} from 'vue-router'
import {useUserStore}from '@/stores'
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'
//弹出层
const show=ref(false)

//定义咨询师信息响应式变量
const updateConsultantInfo =ref({
    avatar:'',
    name:'',
    coun_label:'2',
    introduction:'',
    experience:'',
    account:'',
    gender:'男',
    id:''
})
const value=ref()
const items=ref([])
//获取全部咨询师信息
const fetchData=async()=>{
    const res=await getConsultants()
    console.log(res)
    items.value=res.data
}

onMounted(fetchData)

//编辑咨询师信息
const editConsultant= async(item1)=>{
    show.value=true
    updateConsultantInfo.value.avatar=item1.avatar
    updateConsultantInfo.value.name=item1.name
    updateConsultantInfo.value.coun_label=item1.coun_label
    updateConsultantInfo.value.introduction=item1.introduction
    updateConsultantInfo.value.experience=item1.experience
    updateConsultantInfo.value.account=item1.account
    updateConsultantInfo.value.gender=item1.gender
    updateConsultantInfo.value.id=item1.id
}
//删除咨询师信息
const del_Consultant=async(id)=>{
    await Dialog.confirm({
       message:'您确定要删除该咨询师信息吗？'
    })
    .then(async()=>{
        const res=await delConsultant(id).then((response)=>{
        return response;
       }).catch((error)=>{
        return error
        })
         if(res.status!==201){
         if(res.response.status==402){
           const toastMessage=res.response.data.error
           Toast.fail(toastMessage)
            isRegistering.value=false;
            return
           }
         }
         Toast.success('删除成功')
         fetchData()
    })
    .catch(()=>{
       Toast('取消操作')
    })



}

//编辑修改咨询师信息
const submit_updateConsultant=async()=>{
    const formData=new FormData();
    formData.append('avatar',updateConsultantInfo.value.avatar)
    formData.append('name',updateConsultantInfo.value.name)
    formData.append('coun_label',updateConsultantInfo.value.coun_label)
    formData.append('introduction',updateConsultantInfo.value.introduction)
    formData.append('experience',updateConsultantInfo.value.experience )
    formData.append('account',updateConsultantInfo.value.account)
    formData.append('gender',updateConsultantInfo.value.gender)
    formData.append('id',updateConsultantInfo.value.id)
    const res=await updateConsultant(formData).then((response)=>{
      return response
    }).catch((error)=>{
     return error
    })
   console.log(res)
   if(res.status!==201){
   if(res.response.status==402){
        const toastMessage=res.response.data.error
        Toast.fail(toastMessage)
        return
       }
    }
    Toast.success('修改信息成功')
    updateConsultantInfo.value={}
    show.value=false
    fetchData()
}

const router=useRouter()
//添加咨询师
const addConsultant=()=>{
    router.push('/addConsultant')
}


</script>

<style lang="scss" scoped>
    .consulants-page{
        width: 100%;
        .head{
        display: flex;
        position: fixed;
        z-index: 999;
        justify-content: space-between;
        align-items: center;
        min-height: 30px;
        background-color: #fff;
         top:35px;
         padding: 0 10px;
         .search{
            flex: 1;
         }
         .add-btn{
            background-color: var(--gh-admin);
            color: #fff;
            font-size: 14px;
            font-family: '黑体';
            border-radius: 5px;
            height: 30px;
            width: 130px;
         }
     }
        .consultant-list{
            margin-top: 85px;
            padding:0 5px;
             .total_consultants{
                text-align: center;
                padding: 5px 0;
                font-size: 10px;
                color: var(--gh-text3);
             }
             .van-cell{
                background-color: #fff;
                border:1px solid var(--gh-line) ;
                margin-top: 8px;
                .name{
                    background-color: #f5f5f5;
                    width: 100%;
                    font-size: 14px;
                    line-height: 30px;
                    height: 30px;
                }
                 .account{
                    color: var(--gh-price);
                    font-size: 12px;
                    margin: 5px  0 ;
                 }
                 .operate{
                width: 100%;
                display: flex;
               justify-content: space-between;
               align-items: center;
                .van-button{
                   height: 25px;
                   font-size: 10px;
                   background-color: #f5f5f5;
            }
           }
             }
        }
        .updatepage{
        h3{
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }
        .van-button{
            width: 60%;
            left: 50%;
            transform: translate(-50%);
            margin: 20px 0;
        }
    }
    }
</style>
